<!--
 * @Author: wangming
 * @Date: 2022-05-17 10:58:06
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-18 10:14:26
 * @FilePath: /hanma-paas-mobile-fed/Users/wm/瀚川/hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/mainContent/__components__/Operatenav.vue
 * @Description: 
-->
<template>
  <div class="ks-row-middle dib lh0">
    <component
      :is="i"
      v-for="(i, index) in btns"
      :key="index"
      @operateNext="operateNext(i)"
    ></component>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { IconPark } from "@icon-park/vue/es/all";
export default {
  computed: {
    btns() {
      let list = [];
      this.index > 0 && list.push("top");
      this.index < this.configList.length - 1 && list.push("bottom");
      !!this.parentList && list.push("out");
      return list;
    },
  },
  props: {
    parentIndex: {
      type: Number,
      default: 0,
    },
    parentList: {
      default: () => null,
    },
    configList: {
      type: Array,
      default: () => [],
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  components: {
    IconPark,
    top: {
      functional: true,
      render: (h, ctx) => {
        return (
          <i
            class="el-icon-top f14 b pl5 pr5 poi icons"
            vOn:click_stop={() => ctx.listeners.operateNext()}
          ></i>
        );
      },
    },
    bottom: {
      functional: true,
      render: (h, ctx) => {
        return (
          <i
            class="el-icon-bottom f14 b pl5 pr5 poi icons"
            vOn:click_stop={() => ctx.listeners.operateNext()}
          ></i>
        );
      },
    },
    out: {
      functional: true,
      render: (h, ctx) => {
        return (
          <IconPark
            vOn:click_stop_native={() => ctx.listeners.operateNext()}
            size="14"
            type="logout"
            class="pl5 pr5 poi icons"
          ></IconPark>
        );
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    ...mapActions(["setModelForm"]),
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
    },
    operateNext(key) {
      switch (key) {
        case "top":
          this.swapArray(this.configList, this.index, this.index - 1);
          break;
        case "bottom":
          this.swapArray(this.configList, this.index, this.index + 1);
          break;
        case "out":
          let config = this.configList.splice(this.index, 1)[0];
          this.parentList.splice(this.parentIndex + 1, 0, config);
          this.setModelForm({});
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.icons {
  color: #000;
  &:hover {
    color: #1890ff;
  }
}
</style>
